<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#001529"
            class="el-menu-vertical-demo"
            default-active="1-1"
            text-color="#fff"
            router
          >
            <el-menu-item>
              <img
                :style="{ width: '100%' }"
                src="	http://www.mobiletrain.org/images/index/new_logo.png?t=5.28"
                alt=""
              />
            </el-menu-item>
            <template v-for="item in infoArr.acl" :key="item.id">
              <el-sub-menu :index="item.auth_path" v-if="item.children.length !== 0">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{ item.auth_name }}</span>
                </template>
                <el-menu-item
                  :index="child.auth_path"
                  v-for="child in item.children"
                  :key="child.id"
                >
                  <el-icon><icon-menu /></el-icon>
                  <span>{{ child.auth_name }}</span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item :index="item.auth_path" v-else>
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.auth_name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div>xxx</div>
          <p>你好 {{ infoArr.username }}/董事办</p>
          <button @click="removeLoginInfo">注销登录</button>
        </el-header>
        <!--主体 + 二级路由 -->
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 引入路由方法
import { useRouter } from 'vue-router'
const router = useRouter()

// 获取user信息, 用于渲染title
const infoArr = ref(JSON.parse(localStorage.getItem('userInfo') as string))

// 登出后删除user信息并跳转路由
function removeLoginInfo() {
  localStorage.removeItem('userInfo')
  router.push('/login')
}
</script>

<style scoped lang="scss">
.common-layout {
  height: 100% !important;
  .el-container {
    height: 100% !important;
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 12px;
      }
    }
    .el-aside {
      height: 100% !important;
      .el-scrollbar {
        height: 100% !important;
        background-color: #001529;
        .el-menu {
          height: 100% !important;
          border-right: 0;
        }
      }
    }
  }
}
</style>
